<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <Todolist /> -->
    <router-view> </router-view>
    <div class="router_wrap">
      <div
        class="router_item"
        v-for="(routes_item, routes_index) in routes.filter((item) => {
          return item.name;
        })"
        :key="routes_index"
      >
        <router-link :to="routes_item.path">{{ routes_item.name }}</router-link>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
import HelloWorld from "./components/HelloWorld.vue";
import Todolist from "./views/Todolist.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    Todolist,
  },
  data() {
    return {
      routes: this.$router.options.routes,
    };
  },
  mounted() {
    // console.log(this.routes);
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
   user-select:none;
}

$blue: rgb(22, 139, 235);
$red: rgb(255, 67, 67);
.router_wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background-color: $blue;
  display: flex;
  justify-content: space-around;
  font-size: 40px;
}
.router_wrap a {
  text-decoration: none;
  color: white;
  line-height: 80px;
}
</style>
